<template>
  <view class="help-details-container">
    <!-- 根据 helpId 渲染不同的帮助内容 -->
    <view v-if="helpId === '1'">
      <h3>如何新建拼车信息</h3>
      <p>步骤 1: 打开拼车管理页面，点击页面上的“+”按钮。</p>
      <p>步骤 2: 在弹出的表单中，填写拼车信息：<br />
        - 出发地：选择您的出发地点，可以通过下拉菜单选择或者输入地点。<br />
        - 目的地：选择您的目的地，确保输入准确。<br />
        - 出发时间：选择您的出发时间，确保时间合理。<br />
        - 活动人数：选择与您一起出行的人数。<br />
      </p>
      <p>步骤 3: 点击“确认”按钮，系统会自动保存您的拼车信息，并返回拼车管理页面。</p>
    </view>
    <view v-if="helpId === '2'">
      <h3>如何删除发起的拼车</h3>
      <p>步骤 1: 打开拼车管理页面，找到您发布的拼车信息。</p>
      <p>步骤 2: 点击您要删除的拼车信息旁边的“删除”按钮，系统会弹出确认框。</p>
      <p>步骤 3: 点击确认框中的“确定”按钮，即可删除拼车信息。</p>
      <p>步骤 4: 删除后，您将无法恢复该拼车信息，请确保删除操作无误。</p>
    </view>
    <view v-if="helpId === '3'">
      <h3>如何登陆新账号</h3>
      <p>步骤 1: 打开登录页面，在输入框中填写您的手机号信息。</p>
      <p>步骤 2: 输入您的验证码，请确保输入正确。</p>
      <p>步骤 3: 或者选择其他方式：微信登陆或者用户免登录体验，首次微信登陆需要绑定手机号。</p>
      <p>步骤 4: 点击“登录”按钮，系统将验证您的账号和验证码。如果信息无误，您将成功登录。</p>
      <p>步骤 5: 登录成功后，您将进入首页，开始使用各项功能。</p>
      <p>提示：如果遇到登录问题，请确保网络连接正常，或者尝试清除缓存。</p>
    </view>
    <view v-if="helpId === '4'">
      <h3>如何更改设置</h3>
      <p>步骤 1: 进入“我的”，找到“设置”选项。</p>
      <p>步骤 2: 点击“设置”按钮，选择检查更新。</p>
      <p>步骤 3: 点击通知管理按钮，选择是否接受消息通知。</p>
      <p>步骤 4: 点击注销账号，注销当前手机号。</p>
    </view>
    <view v-if="helpId === '5'">
      <h3>如何修改个人信息</h3>
      <p>步骤 1: 进入“我的”页面，点击“修改信息”按钮。</p>
      <p>步骤 2: 在“修改头像”区域，点击当前头像进行更换，您可以选择从相册上传新头像，或者使用摄像头拍照。</p>
      <p>步骤 3: 更新您的昵称、性别、生日等信息。</p>
      <p>步骤 4: 点击“更新”按钮，您的修改将立即生效。</p>
      <p>提示：修改个人信息后，请确保保存更改，避免丢失已修改的信息。</p>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      helpId: null, // 存储从 URL 中获取的参数
    };
  },
  onLoad(options) {
    // 获取传递的参数 helpId
    if (options.helpId) {
      this.helpId = options.helpId;
    }
  },
  methods: {
    // 跳转到帮助页面，传递不同的 helpId
    goToHelpPage(id) {
      wx.navigateTo({
        url: `/pages/help/details?helpId=${id}`, // 页面跳转时带上帮助 ID
      });
    },
  },
};
</script>

<style scoped>
/* 样式 */
.help-details-container {
  padding: 20px;
}

.help-text {
  cursor: pointer;
  color: #007aff;
  margin-bottom: 10px;
}

.help-title {
  font-size: 18px;
  font-weight: bold;
}

.card {
  display: flex;
  padding: 15px;
  background-color: #f7f7f7;
  margin: 10px 0;
}

.card-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.help-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.card-right {
  flex: 2;
}

.card-right .help-text {
  margin-top: 10px;
}
</style>
